<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 对比工具</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="common.css">
    <script>
        // 防止主题闪烁 - 在页面渲染前应用主题
        (function() {
            const theme = localStorage.getItem('global-theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark-theme');
            }
        })();
    </script>
    <link rel="stylesheet" href="json-comparator.css">
</head>
<body>
    <div style="display: flex; height: 100vh;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>工具库</h2>
                <button class="theme-toggle-btn" id="globalThemeToggle" title="切换主题" aria-label="切换浅色/深色主题">
                    <span class="theme-icon">🌓</span>
                </button>
            </div>
            <div class="sidebar-item" onclick="location.href='index.html'">JSON 格式化</div>
            <div class="sidebar-item active" onclick="location.href='json-comparator.html'">JSON 对比</div>
            <div class="sidebar-item" onclick="location.href='text-comparator.html'">文本对比</div>
            <div class="sidebar-item" onclick="location.href='url-codec.html'">URL 编解码</div>
            <div class="sidebar-item" onclick="location.href='text-decoder.html'">文本解码</div>
            <div class="sidebar-item" onclick="location.href='datetime-converter.html'">日期时间转换</div>
            <div class="sidebar-item" onclick="location.href='md5-hash.html'">加解密</div>
            <div class="sidebar-item" onclick="location.href='ck-extractor.html'">CK 提取</div>
            <div style="margin-top: auto; padding: 15px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); text-align: center;">
                版本: v1.0.0
            </div>
        </div>
        <div class="main-content">
            <div class="json-comparator">
                <div class="comparator-header">
                    <div class="panel-header">
                        <h3>JSON 1</h3>
                        <div class="header-controls">
                            <span id="stats1" class="stats"></span>
                        </div>
                    </div>
                    <div class="panel-header">
                        <h3>JSON 2</h3>
                        <div class="header-controls">
                            <span id="stats2" class="stats"></span>
                        </div>
                    </div>
                    <div class="diff-summary-container">
                        <div id="diffSummary" class="diff-summary-text"></div>
                    </div>
                </div>

                <div class="comparator-body">
                    <div class="json-panel" id="panel1">
                        <div class="editor-container">
                            <div class="line-numbers" id="lineNumbers1"></div>
                            <textarea class="json-editor" id="jsonEditor1" 
                                      wrap="soft"
                                      placeholder="粘贴或输入第一个 JSON..."></textarea>
                            <div class="highlight-overlay" id="highlightOverlay1"></div>
                        </div>
                        <div class="json-error" id="jsonError1"></div>
                    </div>
                    
                    <div class="json-panel" id="panel2">
                        <div class="editor-container">
                            <div class="line-numbers" id="lineNumbers2"></div>
                            <textarea class="json-editor" id="jsonEditor2" 
                                      wrap="soft"
                                      placeholder="粘贴或输入第二个 JSON..."></textarea>
                            <div class="highlight-overlay" id="highlightOverlay2"></div>
                        </div>
                        <div class="json-error" id="jsonError2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入依赖文件 -->
    <script src="theme-toggle.js"></script>
    <script src="comparator-common.js"></script>
    <script src="json-diff-engine.js"></script>
    <script src="line-locator.js"></script>
    <script src="highlight-manager.js"></script>
    <script src="diagnose-highlight.js"></script>
    <script src="debug-matching.js"></script>
    <script src="json-comparator.js"></script>
    <script src="test-functions.js"></script>
</body>
</html>